<template>
  <div>
    <div
      class="box"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="order-detail-head clearfix">
        <h3 class="order-title fl">产权交易订单详情</h3>
        <p class="fr" @click="backPrev">返回上一页</p>
      </div>

      <div class="detail-box clearfix">
        <div class="news-con fl">
          <div class="title">
            <h3>转让标的名称：{{ info.name }}</h3>
            <p>项目编号：{{ info.number }}</p>
          </div>
          <div class="news-con-other-con">
            <div class="other-con-list">
              <h4 class="small-title clearfix">
                <img src="../../assets/img/detail003.png" alt="" />
                <span>报(竞)价方式</span>
              </h4>
              <div class="detail-con">
                <div class="detail-info clearfix">
                  <p>报价周期：</p>
                  <p>{{ info.offerEndTime }}</p>
                </div>
                <div class="detail-info clearfix">
                  <p>报价规则：</p>
                  <p>{{ info.offerRule }}</p>
                </div>
                <div class="detail-info clearfix">
                  <p>标简介：</p>
                  <p>
                    {{ info.transferBrief }}
                  </p>
                </div>
              </div>
            </div>
            <div class="other-con-list">
              <h4 class="small-title clearfix">
                <img src="../../assets/img/detail003.png" alt="" />
                <span>竞买登记</span>
              </h4>
              <div class="detail-con">
                <div class="detail-info clearfix">
                  <p>报名方式：</p>
                  <p>
                    {{ info.applyWay }}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>看样地点：</p>
                  <p>
                    {{ info.seeSite }}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>看样时间：</p>
                  <p>
                    {{ info.seeTime }}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>保证金及处理方式：</p>
                  <p>
                    {{ info.earnestMoney }}
                  </p>
                </div>
              </div>
            </div>
            <div class="other-con-list">
              <h4 class="small-title clearfix">
                <img src="../../assets/img/detail003.png" alt="" />
                <span>交易方式</span>
              </h4>
              <div class="detail-con">
                <div class="detail-info clearfix">
                  <p>交易地点：</p>
                  <p>
                    {{ info.dealSity }}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>成交确认、价款支付及合同签订：</p>
                  <p>
                    {{ info.transferBasePrice }}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>标的交割：</p>
                  <p>
                    {{ info.transferDelivery }}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>风险提示：</p>
                  <p>
                    {{ info.riskHint }}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>其他事项：</p>
                  <p>
                    {{ info.otherThing }}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>联系方式：</p>
                  <p>
                    {{ info.contactWay }}
                  </p>
                </div>
                <div class="detail-info clearfix">
                  <p>附件：</p>

                  <p
                    v-if="info.attachment !== ''"
                    class="look-adjunct"
                    type="text"
                    @click="lookContract(info.attachment)"
                    >查看附件</p>

                  <div v-else>无上传附件</div>
                </div>
              </div>
            </div>

            <div class="submit clearfix">
              <div v-if="signSealStatus === 'WAIT'">
                <el-button
                  class="look"
                  @click="signWord(1)"
                  v-if="userType == 'PERSON'"
                  >签字</el-button
                >
                <el-button class="look" @click="signWord(2)" v-else
                  >签字</el-button
                >
              </div>
              <div v-if="signSealStatus === 'FINISHED'">
                <div style="margin: 5px 10px 0px 15px">
                  <el-row class="clearfix">
                    <div class="fl" style="font-size: 14px">签字：</div>

                    <img
                      :src="
                        'data:image/png;base64,' +
                        pageData.signSealStatus.sealData
                      "
                      class="viewer_img fl"
                    />
                  </el-row>
                </div>
              </div>

              <div
                v-if="signSealStatus === 'FINISHED' && pageData.isSign === 0"
              >
                <p class="look" @click="submit(2)">签署合同</p>
              </div>
              <div
                v-if="signSealStatus === 'FINISHED' && pageData.isSign === 1"
              >
                <p class="look" @click="lookContract()">查看合同</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <signDialog
        v-if="signDialogVisible"
        ref="signDialogDom"
        @refreshDataList="getDetail(this.id)"
      ></signDialog> -->
    </div>
    <sigleApplySeal
      ref="sigleDom"
      v-if="sigleVisible"
      @update="update"
    ></sigleApplySeal>
    <companyApplySeal
      ref="compaynDom"
      v-if="compyanVisible"
      @update="update"
    ></companyApplySeal>
  </div>
</template>
<script>
import signDialog from "./sign-dialog";
import sigleApplySeal from "../../components/sigleApplySeal"; // 个人申请印章
import companyApplySeal from "../../components/companyApplySeal"; // 企业申请印章
import Cookie from "js-cookie";
export default {
  components: {
    signDialog,
    sigleApplySeal,
    companyApplySeal,
  },

  data() {
    return {
      pageData: null,
      id: "",
      loading: false,
      info: {
        name: "", //转让标的名称
        number: "", //项目编号
        offerEndTime: "", //报价周期
        offerRule: "", //报价规则
        transferBrief: "", //标简介
        applyWay: "", //报名方式
        seeSite: "", //看样地点
        seeTime: "", //看样时间
        earnestMoney: "", //保证金及处理方式
        dealSity: "", //交易地点
        transferBasePrice: "", //成交确认、价款支付及合同签订
        transferDelivery: "", //标的交割
        riskHint: "", //风险提示
        otherThing: "", //其他事项
        contactWay: "", //联系方式
        attachment: "", //附件
        contract: "",
      },

      //签字
      signSealStatus: "",
      compyanVisible: false, //企业申请
      sigleVisible: false, // 个人申请
      //签署合同
      isUpdisable: true,
      userType: Cookie.get("userType"),
    };
  },
  methods: {
    update() {
      (this.compyanVisible = false), (this.sigleVisible = false);
    },
    // 签字
    signWord(type) {
      //type 1 代表个人 2 代表企业
      if (type == 1) {
        this.sigleVisible = true;
        this.$nextTick(() => {
          this.$refs.sigleDom.init();
        });
      } else {
        this.compyanVisible = true;
        this.$nextTick(() => {
          this.$refs.compaynDom.init();
        });
      }
    },
    submit(type) {
      if (type == 2) {
        //签署合同
        let params = {
          biddingId: this.pageData.biddingId, //竞价实例id
          id: this.pageData.id, //订单id
        };
        if (this.pageData.contract != null && this.pageData.contract !== "") {
          params.contract = this.pageData.contract;
        } else {
          this.$message.error("请联系合作方上传合同，上传合同之后才能签署合同");
          return;
        }

        this.$http("post", "/sys/iaTransaction/sginyi.do", params).then(
          (res) => {
            if (res.code == "0000") {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.$emit("backPrev");
                },
              });
            }
          }
        );
      }
    },
    // 查看合同
    lookContract(id) {
      console.log(id);
      var resId = "";
      if (id) {
        resId = id;
      } else {
        resId = this.info.contract;
      }
      var url = this.baseUrl +"/sys/file/new/down?TOKEN=" +Cookie.get("token") +"&id=" +resId;
      window.location.href =url
    },

    backPrev() {
      this.$emit("backPrev");
    },
    getDetail(id) {
      this.id = id;
      this.loading = true;
      this.$http(
        "get",
        "/sys/iaTransaction/getPropertyTransactionOrderDetail.do",
        {
          id: id,
        }
      )
        .then((res) => {
          if (res.code == "0000") {
            this.info = res.result;
            this.pageData = res.result;

            //处理 签字状态
            if (this.pageData.signSealStatus != null) {
              this.signSealStatus = this.pageData.signSealStatus.status;

              if (this.signSealStatus === "NOIDENTITY") {
                this.$message.error(
                  "您还没有实名认证，请到进行实名认证了在进行相应操作"
                );
              }

              //已签署不能在上传
              if (
                this.signSealStatus === "FINISHED" &&
                this.pageData.isSign === 1
              ) {
                this.isUpdisable = false;
              }
            }

            //处理 签字图片
            this.pageData.signSealStatus.sealData =
              "data:image/png;base64," + _that.pageData.signSealStatus.sealData;

            console.log("图片显示：", this.pageData.signSealStatus.sealData);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>
<style scoped>
.order-title {
  font-size: 16px;
  color: #4a4a4a;
  padding-top: 15px;
  position: relative;
  padding-left: 4px;
  padding-bottom: 18px;

  padding: 20px 45px;
  background: #fff;
  position: relative;
}
.order-title::before {
  content: " ";
  width: 5px;
  height: 20px;
  background: #f48d06;
  border-radius: 2px;
  position: absolute;
  left: 34px;
  top: 20px;
}
.order-detail-head {
  border-bottom: 1px solid #e1e1e1;
}
.order-detail-head p {
  width: 108px;
  height: 30px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #f48d06;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  color: #f48d06;
  margin-right: 34px;
  margin-top: 15px;
  cursor: pointer;
}
.order-detail-head p:hover {
  background: #f48d06;
  color: #fff;
}
.box {
  margin-left: 10px;
  min-height: 400px;
  background: #fff;
}
.nav {
  height: 36px;
  background: #f5f5f5;
  line-height: 36px;
  margin-left: 68px;
}
.nav a {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}
.news-con {
  width: 885px;
  min-height: 400px;
  padding-left: 35px;
  background: #fff;
  box-sizing: border-box;
}

.news-con .title {
  border-bottom: 1px solid #dedede;
  padding-bottom: 16px;
  width: 797px;
  margin-bottom: 25px;
}
.news-con .title h3 {
  text-align: left;
  color: rgba(81, 81, 81, 1);
  font-size: 16px;
  padding-top: 20px;
  margin-bottom: 10px;
}
.news-con .title p {
  text-align: left;
  color: rgba(154, 154, 154, 1);
  font-size: 14px;
}

.news-con-other-con {
  padding-bottom: 30px;
}
.news-con-other-con p {
  text-indent: 20px;
  line-height: 140%;
  font-size: 14px;
}
.news-con-other-con img {
  display: block;
  max-width: 100%;
  margin-bottom: 1px;
}

.price {
  margin-top: 20px;
  margin-bottom: 20px;
}
.price span {
  width: 70px;
  height: 9px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.65);
  line-height: 35px;
}

.price input {
  width: 333px;
  height: 35px;
  background: #f6f6f6;
  border: 1px solid #e7e7e7;
  line-height: 35px;
  text-indent: 10px;
  font-size: 14px;
}
.submit p {
  width: 159px;
  height: 44px;
  background: #f48d06;
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
  letter-spacing: 6px;
  margin-left: 70px;
  text-align: center;
  line-height: 44px;
  cursor: pointer;
  float: left;
  margin-top: 40px;
  text-indent: 0;
}
.submit p:hover {
  opacity: 0.7;
}
.submit p:active {
  opacity: 0.7;
}
.submit:active {
  opacity: 0.7;
}
.small-title {
  margin-bottom: 20px;
  margin-top: 15px;
}
.small-title img {
  float: left;
  width: 19px;
  height: 10px;
  margin-top: 6px;
  margin-right: 5px;
}
.small-title span {
  float: left;
  font-size: 16px;
  color: #4a4a4a;
}
.detail-info p:nth-child(1) {
  float: left;
  width: 100px;
  font-size: 14px;

  color: rgba(0, 0, 0, 0.65);
  text-indent: 0;
  text-align: right;
}
.detail-info p:nth-child(2) {
  float: left;
  width: 550px;
  font-size: 14px;
  color: #4a4a4a;
  text-indent: 0;
  margin-left: 15px;
}
.detail-info {
  margin-bottom: 20px;
}
.look {
  color: #f48d06;
}

.viewer_img {
  position: relative;
  width: 100px;
  height: 100px;
}
.look-adjunct {
  color: #f48d06!important;
  font-size: 14px;
  cursor: pointer;
}
.look-adjunct:hover {
  text-decoration: underline;
}
</style>
